<template>
    <div class = 'review'>
        <h2 class="tit">医生工作组查看</h2>
        <div class="main">
            <p class="title">基本信息</p>
            <Row class="box">
                <Col span="9">
                    <div class = 'text'>
                        <span>医院名称：</span>
                        <span>{{ params.hospitalName }}</span>
                    </div>
                    <div class = 'text'>
                        <span>医疗团队名称：</span>
                        <span>{{ params.name }}</span>
                    </div>
                    <div class = 'text' v-if="params.type == '家医签约团队' ">
                        <span>允许居民主动在线申请签约：</span>
                        <span>{{ params.patientOnOff }}</span>
                    </div>
                </Col>
                <Col span="7">
                    <div class = 'text'>
                        <span>所属科室：</span>
                        <span>{{ params.deptName }}</span>
                    </div>
                    <div class = 'text'>
                        <span>医疗团队电话：</span>
                        <span>{{ params.phone }}</span>
                    </div>
                </Col>
                <Col span="8">
                    <div class = 'text'>
                        <span>医疗团队类型：</span>
                        <span>{{ params.type }}</span>
                    </div>
                    <div class = 'text'>
                        <span>团队图标：</span>
                        <img :src="fileBaseUrl + this.pictureFormat(params.icon)" v-if="params.icon" class="pic"/>
                        <span v-else>暂无</span>
                    </div>
                </Col>
            </Row>
        </div>
        <div class = 'main'>
            <p class="title">团队介绍</p>
            <Row class="box">               
                <Col span="23">
                    <div class = 'adminScope'>
                        <span>医疗团队介绍信息：</span>
                        <span style="word-break: break-all;word-wrap: break-word;">{{ params.remark }}</span>
                    </div>
                    <div class = 'adminScope'>
                        <span>医疗团队管理范围：</span>
                        <span style="word-break: break-all;word-wrap: break-word;">{{ params.controlLimit }}</span>
                    </div>
                </Col>
            </Row>
        </div>
        <div class = 'main'>
            <p class="title">团队成员</p>
            <Table stripe :columns="addMember" :data="addMemberDate" class="tablebox"></Table>
        </div>
        <div class="buttonbox">
            <Button @click='reback' >
                <i class = "iconfont icon-butongyi icon"></i>返回
            </Button>
        </div>
    </div>
</template>
<script>
import api from "@/api/commonApi";
export default {
    data () {
        return {
            // 医护人员列表
            addMember: [
                {
                    title:"排序",
                    align:"center",
                    key:"sum"
                },
                 {
                    title:"医生姓名",
                    align:"center",
                    key:"doctorName"
                },
                {
                    title:"科室",
                    align:"center",
                    key:"deptName"
                },
                {
                    title:"职称",
                    align:"center",
                    key:"titleName"
                },
                {
                    title:"联系电话",
                    align:"center",
                    key:"phone"
                },
                {
                    title:"团队角色",
                    align:"center",
                    key:"sum",
                    render:(h,params)=>{
                        let row = params.row;
                        let role = ''
                        if(row.role ==1) {
                            role = "团队负责人"
                        } else if(row.role ==2) {
                            role = "全科医生"
                        } else if(row.role ==3) {
                            role = "护士"
                        } else if(row.role ==4) {
                            role = "村医"
                        } else {
                            role = "其他"
                        }
                        return [
                            h('span',{
                                
                            }, role)
                        ]
                    }
                },
            ],
            addMemberDate: [],
            params: {}
        }
    },
    created () {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/doctorOperation/doctorGroup/list",
                title: "医生端运营"
            },
            {
                path: "/index/doctorOperation/doctorGroup/list",
                title: "医疗小组"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted () {
        let id = this.$route.query.id;
        this.$axios.post(api.findTeamById, {
            id
        }).then(res => {
            if(res.data.success) {
                let ret = res.data.object;
                this.params = ret
                if(this.params.type == 1){
                    this.params.type = '家医签约团队'
                } else {
                    this.params.type = '出院随访签约团队'
                }
                if(this.params.patientOnOff == 1){
                    this.params.patientOnOff = '开通'
                } else {
                    this.params.patientOnOff = '关闭'
                }
                ret.list.forEach((item,index) => {
                    item.sum = this.addZeros(index)
                })
                this.addMemberDate = ret.list
            }
        }).catch(err => {
            this.$Message.error("加载团队信息失败")
        })
    },
    methods:{
        // 返回上一页
        reback () {
            let query = this.$route.query
            this.functionJS.queryNavgationTo(
                this,
                "/index/doctorOperation/doctorGroup/list",
                {
                    pageNo:query.pageNo ? parseInt(query.pageNo): 1,
                    province: query.province ? parseInt(query.province): "",
                    city: query.city ? parseInt(query.city): "", 
                    area: query.area ? parseInt(query.area): "",
                    hospital: query.hospital ? parseInt(query.hospital): "",
                    isBack: 2
                }
            );
        }
    }
}
</script>
<style lang="less" scoped>
    .review{
        padding: 10px 0;
        width: 100%;
        background: #ffffff;
        box-sizing: border-box;
        .tit {
            margin:10px 0;
            font-weight:bold;
            text-align:center;
        }
        .main{
            width: 98%;
            display: flex;
            flex-direction: column;
            margin: 20px auto;
            border: 1px solid #f0f0f0;
            box-shadow: 0 4px 3px #ebedf8;
            border-radius: 5px;
            padding-bottom: 20px;
            .title {
                font-size: 20px;
                padding-left: 15px;
                margin-bottom: 20px;
                color: #333;
                height: 40px;
                line-height: 40px;
                background: #ebedf8;         
            }
            .box{
                padding: 0 30px;
            }
            .tablebox {
                margin: 0 20px;
            }
            .text {
                margin-bottom: 20px;
            }
            .pic {
                width: 50px;
                height: 50px;
            }
            .adminScope{
                margin:10px 50px;
                width:100%;
            }           
        }
        .buttonbox {
            text-align: center;
            margin: 20px;
            .icon {
                font-size: 14px;
                margin-right: 5px;
            }
        }
    }
</style>
